<template>
  <article>
    <section
      class="chart_container"
      :style="{width: outerWidth, height: outerWidth}"
    >
      <!-- 图表 -->
      <div :id="id" class="chart" :style="{width: outerWidth, height: outerWidth }" />
    </section>

    <!-- 底座 -->
    <div class="remark" :style="{width: outerWidth}">
      <div class="pedestal">
        <div
          class="top"
          :style="{
            width: pedestalWidth,
            background: pedestalColor,
          }"
        >
          <p
            :style="{
              width: pedestalWidth,
              background: pedestalColor,
              'box-shadow': pedestalBoxShadow
            }"
          />
        </div>
        <div
          class="front"
          :style="{
            width: pedestalWidth,
            background: pedestalColor
          }"
        />
      </div>
    </div>
  </article>
</template>

<script>
import common from '@/mixins/common'
/*
vstyle: {
  outer: {
    outerRadius: 75,
    innerRadius: 60,
    color: '',
    startColor: '',
    endColor: '',
    borderColor: '',
    backgroundColor: '',
    startAngle: '',
    endAngle: ''
  },
  inner: {
    outerRadius: 55,
    innerRadius: 50,
    color: '',
    startColor: '',
    endColor: '',
    backgroundColor: '',
    startAngle: '',
    endAngle: ''
  },
  circle: {
    color: '',
    radius: '',
    centerColor: '',
    centerBorderColor: ''
  },
  pointer: {
    color: '',
    startColor: '',
    endColor: '',
    length: '',
    width: ''
  },
  pedestal: {
    color: '',
    width: ''
  }
}
*/
export default {
  mixins: [common],
  props: {
    id: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true
    },
    other: {
      type: Object,
      default: null
    },
    vstyle: {
      type: Object,
      default: null
    }
  },
  computed: {
    outerWidth () {
      if (this.vstyle && this.vstyle.outer.outerRadius) {
        return this.vstyle.outer.outerRadius * 2 + 'px'
      }
      return '150px'
    },
    outerSize () {
      let size
      try {
        size = this.vstyle.outer.outerRadius - this.vstyle.outer.innerRadius
      } catch (e) {
        return 15
      }
      return isNaN(size) ? 15 : size
    },
    innerSize () {
      let size
      try {
        size = this.vstyle.inner.outerRadius - this.vstyle.inner.innerRadius
      } catch (e) {
        return 5
      }
      return isNaN(size) ? 5 : size
    },
    pedestalWidth () {
      if (this.vstyle && this.vstyle.pedestal.width) {
        return this.vstyle.outer.outerRadius + 'px'
      }
      return '75px'
    },
    pedestalColor () {
      if (this.vstyle && this.vstyle.pedestal.color) {
        return `linear-gradient(
            to top,
            rgba(0,0,0,0) 30%,
            ${this.vstyle.pedestal.color} 100%)`
      }
      return 'linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(11, 216, 232, 0.4) 100%)'
    },
    pedestalBoxShadow () {
      const shadow = 'inset 0 10px 4px -6px rgba(255,255,255,0.5)'
      return shadow
    }
  },
  methods: {
    // 基本公共配置 - 默认值配置
    defaultDeploy (type, style) {
      const start = type === 'outer' ? 230 : 225
      const end = type === 'outer' ? -50 : -45
      const radius = type === 'outer' ? 75 : 55
      return {
        type: 'gauge',
        startAngle: style.startAngle || start,
        endAngle: style.endAngle || end,
        radius: style.outerRadius || radius,
        axisTick: {
          lineStyle: {
            width: 0
          }
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        }
      }
    },
    // 配置圆心图形
    deployGraphic () {
      if (!this.vstyle) return ''
      return [
        {
          type: 'group',
          left: 'center',
          top: 'center',
          children: [
            {
              type: 'circle',
              // 不设置宽高定位失效
              left: 'center',
              top: 'center',
              shape: {
                cx: 0,
                cy: 0,
                r: this.vstyle.circle.radius || 40
              },
              style: {
                fill: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0.3, color: 'transparent' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: this.vstyle.circle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              type: 'circle',
              z: 5,
              // 不设置宽高定位失效
              left: 'center',
              top: 'center',
              shape: {
                cx: 0,
                cy: 0,
                r: 5
              },
              style: {
                fill: this.vstyle.circle.centerBorderColor
              }
            },
            {
              type: 'circle',
              z: 10,
              // 不设置宽高定位失效
              left: 'center',
              top: 'center',
              shape: {
                cx: 0,
                cy: 0,
                r: 3
              },
              style: {
                fill: this.vstyle.circle.centerColor
              }
            }

          ]
        }
      ]
    },
    // 外层刻度
    outerBorder () {
      return {
        ...this.defaultDeploy('outer', this.vstyle.outer),
        ...this.hiddenDeploy(['progress', 'pointer']),
        splitNumber: 16,
        z: 5,
        axisLine: {
          lineStyle: {
            width: this.outerSize,
            color: [
              [1, 'transparent']
            ]
          }
        },
        splitLine: {
          distance: -1 * this.outerSize,
          length: this.outerSize,
          lineStyle: {
            color: this.vstyle.outer.borderColor,
            width: 2
          }
        }
      }
    },
    // 外层值
    outerBoard () {
      return {
        ...this.defaultDeploy('outer', this.vstyle.outer),
        ...this.hiddenDeploy(['splitLine', 'pointer']),
        axisLine: {
          lineStyle: {
            width: this.outerSize,
            color: [
              [1, this.vstyle.outer.backgroundColor]
            ]
          }
        },
        progress: {
          show: true,
          width: this.outerSize,
          itemStyle: {
            color: this.color(this.vstyle.outer)
          }
        },
        data: [{ value: 60 }]
      }
    },
    // 内层值
    coreBoard () {
      return {
        ...this.defaultDeploy('inner', this.vstyle.inner),
        ...this.hiddenDeploy(['splitLine']),
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: this.innerSize,
            color: [
              [1, '#2b3e51']
            ]
          }
        },
        progress: {
          show: true,
          width: this.innerSize,
          roundCap: true,
          itemStyle: {
            color: this.color(this.vstyle.inner)
          }
        },
        pointer: {
          // 指针
          show: true,
          width: this.vstyle.pointer.width || 7,
          length: this.vstyle.pointer.length || 49,
          icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
          offsetCenter: [0, 8],
          itemStyle: {
            color: this.color(this.vstyle.pointer)
          }
        },
        data: [{ value: 60 }]
      }
    },
    // 配置option
    deployOption () {
      const option = {
        tooltip: {
          trigger: ''
        },
        // 圆心配置
        graphic: this.deployGraphic(),
        series: [
          // 内层圆环
          this.coreBoard(),
          // 外层圆环
          this.outerBorder(),
          // // 外层值
          this.outerBoard()
        ]
      }
      return option
    }
  }
}
</script>

<style lang="scss" scoped>
.remark{
  margin-top: -6px;
  .pedestal{
    transform: rotateX(-14deg) translateZ(-30px);
    .top{
      height: 250px;
    }
    .front{
      height: 10px;
    }
  }
}

</style>
